import $ from './jquery.js';
import cookie from './cookie.js';

let id = location.search.split('=')[1];
console.log(id);

$.ajax({
  type: "get",
  url: "../interface/getitem.php",
  data: { id },
  dataType: "json"
}).then(res => {
  let pic = JSON.parse(res.picture);
  console.log(res);
  console.log(pic);
  console.log(pic[1].src);
  console.log(JSON.parse(res.details).src);

  let template = '';
  template += `
  <div class="detailed-content">
  <div class="detailed-main">
      <!-- 左边商品图 -->
      <div class="left">
          <!-- 大图 -->
          <div class="img-l">
              <img src="${pic[0].src}" alt="" class="bg" id="bg">
          </div>
          <!-- 小图列表 -->
          <div class="img-item">
              <ul id="ul">
                  <img src="${pic[0].src}" alt="" style="width: 60px;
                  height: 60px;
                  display: inline-block;
                  margin: 0 0 0 16px;
                  padding-top: 22px;">
                  <img src="${pic[1].src}" alt=""style="width: 60px;
                  height: 60px;
                  display: inline-block;
                  margin: 0 0 0 16px;
                  padding-top: 22px;">
                  <img src="${pic[2].src}" alt=""style="width: 60px;
                  height: 60px;
                  display: inline-block;
                  margin: 0 0 0 16px;
                  padding-top: 22px;">
                  <img src="${pic[3].src}" alt="" style="width: 60px;
                  height: 60px;
                  display: inline-block;
                  margin: 0 0 0 16px;">
              </ul>
          </div>
      </div>

      <div class="right">
          <!-- 头部文字盒子 -->
          <div class="tb-detail-hd">
              <h1>${res.title}</h1>
              <p>寓意：如虎添翼 平安守护</p>
          </div>
          <!-- 价格盒子 -->
          <div class="price-box">
              <span style="display: inline-block;">价格</span>
              <span class="r">￥</span>
              <span class="num">${res.price}</span>
          </div>
          <!-- 运费 -->
          <div class="freight">
              <span class="first" >运费</span>
              <div class="tb-postAge">
                  <span>北京</span>&nbsp;
                  <span>至</span>&nbsp;
                  <span>杭州⬇江岸区↓下箭头快递：0.00</span>
              </div>
          </div>
          <!-- 销量 -->
          <div class="tm-ind-panel">
              <span class="l r">月销量33</span>
              <span class="r">送天猫积分79</span>
          </div>
          <div>
          <span>数量</span>
          <input type="number" style="display:block;" id="num" value="1" min="1" max="99">
              <img src="../src/img/APL4$T~OIC_WM5RM0AZ)EX7.png" alt="" style="width: 500px;">
          </div>
          <!-- 购买  加入购物车 -->
          <div class="tb-action">
              <div class="tb-btn-buy">
                  <a href="">立即购买</a>
                  <button style="background-color: #ff0036;
                  border: 1px solid #ff0036;
                  color: #fff;height: 38px;
                  line-height: 38px;
                  text-align: center;
                  font-size: 16px;width: 180px;
                  " id="additem">加入购物车</button>
              </div>
          </div>
        </div>
  </div>
</div>

<div class="img-77">
<img src="${JSON.parse(res.details).src}" alt="" style="display: block;width: 790px;">
</div>
  `
  $('.detailed-content').html(template);

  //鼠标移入切换主图
  let li = document.querySelectorAll('#ul>img')
  let img = document.querySelector('#bg')
  console.log(li);
  li.forEach(e => {
    e.onmouseover = function(){
        let src = e.src;
        img.src = src
    }
  });

//   let btn = document.querySelector('.btn');
  $('#additem').on('click',function(){
      alert('加入成功');
  });

  $('#additem').on('click', function () {
    addItem(res.id, $('#num').val());
  });


}).catch(xhr => {
  console.log(xhr.status);
});


function addItem(id, num) {
    let product = { id, num };
    
    let shop = cookie.get('shop'); // 从cookie中获得数据


  if (shop) { // 判断是否获得到数据
    shop = JSON.parse(shop);

    // 当商品id在cookie数据中已经存在时 需要修改数量 而不是添加商品
    if (shop.some(el => el.id == id)) {
      let index = shop.findIndex(elm => elm.id == id); // 获得商品对象在数组中的索引
      let count = parseInt(shop[index].num);
      count += parseInt(num);
      shop[index].num = count;
    } else {
      shop.push(product);
    }


  } else {
    shop = [];
    shop.push(product);
  }

  cookie.set('shop', JSON.stringify(shop));  // 将数组转换成JSON字符串存入cookie
}